<template>
    <div class="newEnergy">
        <div class="header">
            <Header></Header>
        </div>
        <div class="classification">
            <div class="top">
                <div  v-for="item in classification" :key="item.id">
                    <img :src="item.src" alt="">
                </div>
            </div>
            <div class="bottom">
                <div v-for="item in classification" :key="item.id">
                    <span>{{ item.text }}</span>
                </div>
            </div>
        </div>
        <div class="carSelection">
            <div class="top">
                <span style="font-weight: bold;">选车工具</span>
                <span class="more">全部品牌
                    <el-icon size="10">
                        <ArrowRight color="#8D8D8F"/>
                    </el-icon>
                </span>
            </div>
            <div class="middle">
                <div v-for="item in brands" :key="item.id">
                    <div>
                        <img :src="item.src" alt="">
                        <span>{{ item.text }}</span>
                    </div>
                </div>
            </div>
            <div class="car">
                <div class="top">
                    <div  v-for="item in cars" :key="item.id">
                        <img :src="item.src" alt="">
                    </div>
                </div>
                <div class="bottom">
                    <div v-for="item in cars" :key="item.id">
                        <span>{{ item.text }}</span>
                    </div>
                </div>
            </div>
            <div class="bottom">
                <div v-for="item in price" :key="item.id">
                    <span>{{ item.text }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import Header from '../components/NewCar/Header.vue'
export default defineComponent({
    components:{
        Header
    },
    setup () {
        let classification = [
            {
                id:1,
                src:require('../assets/一级新能源/分类1.png'),
                text:'销量排行'
            },
            {
                id:2,
                src:require('../assets/一级新能源/分类2.png'),
                text:'新车日历'
            },
            {
                id:3,
                src:require('../assets/一级新能源/分类3.png'),
                text:'续航排行'
            },
            {
                id:4,
                src:require('../assets/一级新能源/分类4.png'),
                text:'易车充电'
            },
            {
                id:5,
                src:require('../assets/一级新能源/分类5.png'),
                text:'条件选车'
            }
        ]
        let brands = [
            {
                id:1,
                src:require('../assets/一级新能源/奔驰.png'),
                text:'奔驰'
            },
            {
                id:2,
                src:require('../assets/一级新能源/保时捷.png'),
                text:'保时捷'
            },
            {
                id:3,
                src:require('../assets/一级新能源/Polestar 2.png'),
                text:'Polestar极星'
            },
            {
                id:4,
                src:require('../assets/一级新能源/比亚迪.png'),
                text:'比亚迪'
            },
            {
                id:5,
                src:require('../assets/一级新能源/大众.png'),
                text:'大众'
            }
        ]
        let cars = [
            {
                id:1,
                src:require('../assets/一级新能源/奔驰E级.png'),
                text:'奔驰E级 插电...'
            },
            {
                id:2,
                src:require('../assets/一级新能源/奔驰EQC.png'),
                text:'奔驰EQC'
            },
            {
                id:3,
                src:require('../assets/一级新能源/奔驰EQE.png'),
                text:'奔驰EQE'
            },
            {
                id:4,
                src:require('../assets/一级新能源/秦PLUS新能源.png'),
                text:'秦PLUS新能源'
            }
        ]
        let price = [
            {
                id:1,
                text:'5万以下'
            },
            {
                id:2,
                text:'5-8万'
            },
            {
                id:3,
                text:'18万以上'
            },
            {
                id:4,
                text:'SUV'
            },
            {
                id:5,
                text:'纯电动'
            },
            {
                id:6,
                text:'插电混动'
            }
        ]
        return {
            classification,
            brands,
            cars,
            price
        }
    }
})
</script>

<style scoped>
.newEnergy{
    background-color: #F6F7FB;
    width: 100%;
}
.header{
    background-color: #F6F7FB;
}
.classification{
    background-color: #F6F7FB;
    width: 100%;
    padding: 30px 0;
}
.classification .top,.classification .bottom,.carSelection .car .top,.carSelection .car .bottom{
    justify-content:space-evenly;
    display:flex;
}
.classification .top img{
    width: 60px;
    height: 60px;
}
.classification .bottom{
    font-size:20px;
    margin-top: 20px;
}
.carSelection{
    background-color: white;
    width: 95%;
    margin: auto;
    border-radius:15px;
    height: 350px;
}
.carSelection .top{
    display:flex;
    justify-content: space-between;
    font-size:25px;
    padding: 0 20px;
    height:60px;
    line-height:60px;
}
.carSelection .top .more{
    font-size:20px;
    color:#8D8D8F;
}
.carSelection .middle,.carSelection .bottom{
    display: flex;
    justify-content: space-evenly;
}
.carSelection .middle div,.carSelection .bottom div{
    background-color: #F6F7FB;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
}
.carSelection .middle div img{
    width: 30px;
    height: 30px;
}
.carSelection .middle div span,.carSelection .car .bottom span,.carSelection .bottom span{
    font-size:20px;
    color:black;
}
.carSelection .middle div:first-child div{
    border: 4px solid #A8DACF;
    border-radius:5px;
}
.carSelection .middle div:first-child div span{
    color: #63A5A6;
}
.carSelection .car .top img{
    width: 140px;
    height: 70px;
    margin: 20px 0;
}
.carSelection .car .bottom{
    margin-top: 40px;
}
.carSelection .bottom{
    margin: 30px 0;
}
.carSelection .car .bottom div{
    background-color: white;
}
</style>